<template>
  <div class="productCard" :style="{ width: `${width}px` }" @click="goto">
    <div class="product-cover">
      <!-- <img class="img" :src="img" alt="" /> -->
      <!-- <u-image class="img" width="100%" :src="img"></u-image> -->
      <image class="img" mode="aspectFill" :src="img"></image>
    </div>
    <div class="title">
      {{ title }}
    </div>
    <div class="price">
      <template v-if="Number(type) !== 1">
        <div class="price-icon">积分</div>
        {{ price }}
      </template>
      <template v-else>
        <!-- <div class="price-icon">￥</div>
        {{ price }} -->
      </template>
    </div>
    <!-- <div class="buy-btn">立即购买</div> -->
    <div class="buy-btn">{{ Number(type) !== 1 ? '预约兑换' : '预约询价' }}</div>
  </div>
</template>

<script setup>
import { toRefs } from "vue";
import { useRouter } from "@/hooks/useRouter";

const router = useRouter();

const props = defineProps({
  type: {
    type: String,
    default: "1",
  },
  img: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  price: {
    type: [Number, String],
    default: "",
  },
  width: {
    type: Number || undefined,
    default: undefined,
  },
  id: {
    type: [Number, String],
    default: "",
  },
});
const { id, type } = toRefs(props);

const goto = () => {
  router.push({
    path: "/pages/productDetail/index",
    query: {
      id: id.value,
      type: Number(type.value),
    },
  });
};
</script>

<style lang="less" scoped>
.productCard {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;

  .product-cover {
    position: relative;
    width: 100%;
    padding-bottom: 160%;
    overflow: hidden;
    .img {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: auto;
      background: #eaeaea;
    }
  }

  .title {
    width: 90%;
    margin: 8px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
  }

  .price {
    margin-bottom: 8px;
    .price-icon {
      font-size: 10px;
      display: inline-block;
    }
  }

  .buy-btn {
    width: 82px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #282828;
  }
}
</style>
